<template>
	<view class="order">
		<!-- 导航头 -->
		<view class="scroll">
			<scroll-view scroll-x class="nav" 
			scroll-with-animation :scroll-left="scrollLeft">
				<view 
				:class="index==TabCur?'text-blue cur':''" 
				class="cu-item text-lg" 
				v-for="(item,index) of list"
				:key='index' @click="tabSelect(index)">
					{{item}}
				</view>
			</scroll-view>
		</view>

		<!-- 内容 -->
		<view class="order-item" 
		v-for="(item,index) of orderList" 
		:key="item.id"
		@click="quxiangqin(item.id)">
			<view class="item-title">
				<view class="title-left">
						<radio v-show="TabCur == 1 || TabCur==3" :checked="item.checked" @click.stop="clickradio(index)" ></radio>
					<text>员工姓名：</text>
					<text>{{item.staffName}}</text>
				</view>
				<text class="title-type">{{list[TabCur]}}</text>
			</view>

			<view class="item-conent">
				<view class="conent-cn" @click="cliclCoby(item.id)">
					<text class="cn-left">订单号</text>
					<text class="cn-right">{{item.id}}</text>
				</view>
				<view class="conent-cn">
					<text class="cn-left">下单时间</text>
					<text class="cn-right">{{item.createTime}}</text>
				</view>
				<view v-show="item.recoveryMethod !== null" class="conent-cn">
					<text class="cn-left">回收方式</text>
					<text class="cn-right">{{item.recoveryMethod==0?'到店':'邮寄'}}</text>
				</view>
			</view>

			<!-- 取消 -->
			<view v-show="TabCur==0|| TabCur==2" class="item-bom">
				<view @click.stop="clickquxiao(item.id,item.staffId)">
					取消
				</view>
			</view>

			<!-- 价格 -->
			<view v-show="TabCur==1 || TabCur==3" class="jiage">
				<text>平台报价:</text>
				<text>￥</text>
				<text>{{Number(item.recoveryPrice).toFixed(2)}}</text>

			</view>

			<!-- 拒绝确认 -->
			<view v-show="TabCur==1" class="sub subright">
				<view class="jujue" @click.stop="jujue(item.id,item.staffId)">
					<view>
						拒绝
					</view>
				</view>

				<view @click.stop="showModal('bottomModal',item)" class="queding">
					<view>
						确认
					</view>
				</view>

			</view>
		
			<!-- 取消 发货-->
			<view v-show="TabCur==3" class="item-bom">
				<view @click.stop="clickquxiao(item.id,item.staffId)">
					取消
				</view>
				<view @click.stop="showModalone('bottomModalone',item)" class="queding margin-left-lg">
					<view>
						发货
					</view>
				</view>
			</view>
			
			<!-- 底部确定栏 -->
			<view v-show="TabCur == 1 || TabCur== 3 " class="tabbar">
				<view v-if="orderList.length>0" class="tijiao">
					<view class="tj">
						<view class="radio">
							<radio @click.stop="selectAllRadio" :checked="allRadio" value="" /><text>全选</text>
						</view>
					</view>
			
					<view class="sub">
						<view v-show="TabCur==3" class="jujue">
							<view>
								取消
							</view>
						</view>
						
						<view v-show="TabCur==1" class="jujue">
							<view>
								拒绝
							</view>
						</view>
			
						<view v-show="TabCur==1" class="queding">
							<view>
								确定
							</view>
						</view>
						
						<view v-show="TabCur==3" class="queding">
							<view @click.stop="addAllOrder">
								发货
							</view>
						</view>
					</view>
				</view>
				<view v-if="orderList.length>0" class="ben"></view>
			</view>
		</view>

<!-- 待确定底部弹出层 -->
			<view class="border-rid cu-modal bottom-modal " 
			:class="modalName=='bottomModal'?'show':''">
				<view class="cu-dialog">
					<view class="bg-white padding-xl">
			
						<view class="margin-bottom-lg flex align-center justify-between">
							<view class="text-black text-lg">确认订单</view>
							<view @click="gaunbi" class="text-gray text-lg">x</view>
						</view>
			
						<view class="margin-bottom-lg flex align-center justify-between">
							<view class="text-black text-lg">回收方式</view>
							<view class="">
								<label class="radio margin-right-sm">
									<radio value="1" :class="checked=='1'?'ativeradio':''" :checked="checked==='1'"
										@click="ckickRadio('1')" /><text>邮寄</text>
								</label>
								<label class="radio">
									<radio :class="checked=='0'?'ativeradio':''" value="0" :checked="checked==='0'"
										@click="ckickRadio('0')" /><text>到店</text>
								</label>
							</view>
						</view>
			
						<view class="margin-bottom-lg flex align-center justify-between">
							<view class="text-black text-lg">修改报价:</view>
							<view class="text-gray text-lg">
								<input type="text" 
								v-model="jiag" 
								placeholder="120元" 
								class="baojia text-right padding-right-sm" />
						 </view>
						</view>
			
						<view 
						v-show="checked==1"
						class="margin-bottom-lg flex align-center justify-between">
							<view class="text-black text-lg">选择回收点:</view>
							<picker  
							:range="zhandianList" 
							range-key="province" 
							:value="inde" 
							@change="bindPicker">
								<view class="huishoudain text-right padding-right-sm text-gray text-lg">
									{{zhandianList[inde]?zhandianList[inde].province:'请选择区域'}}
								</view>
							</picker>
			
						</view>
						
						<view
						v-show="checked==1"
						class="margin-bottom-lg flex align-center justify-end">
							<picker
							
							:range="zhandianList[inde]?zhandianList[inde].childWebsiteList:''" 
							:value="ind" 
							range-key="websiteName" 
							@change="bindPickerone">
								<view class="huishoudain text-right padding-right-sm text-gray text-lg">
									{{zhandianList[inde]?zhandianList[inde].childWebsiteList[ind].websiteName:'请选择回收点'}}
								</view>
							</picker>
						</view>
	
						<view class="tijiaoa">
							<view class="tja" @click="subdingdan">
								提交订单
							</view>
						</view>
					</view>
				</view>
			</view>
		
		<!-- 待发货底部弹出层 -->
					<view class="border-rid cu-modal bottom-modal " :class="modalNameone=='bottomModalone'?'show':''">
						<view class="cu-dialog">
							<view class="bg-white padding-xl">
					
								<view class="margin-bottom-lg flex align-center justify-between">
									<view class="text-black text-lg">确认发货</view>
									<view @click="gaunbione" class="text-gray text-lg">x</view>
								</view>
					
								<view class="margin-bottom-lg flex align-center justify-between">
									<view class="text-black text-lg">回收点名称:</view>
									<view class="text-grey text-lg">{{dangqianOrderone?dangqianOrderone.websiteName:''}}</view>
								</view>
					
								<view class="margin-bottom-lg flex align-center justify-between">
									<view class="text-black text-lg">联系方式：</view>
									<view class="text-grey text-lg">{{dangqianOrderone?dangqianOrderone.tel:''}}</view>
								</view>
					
								<view class="margin-bottom-lg flex align-center justify-between">
									<view class="text-black text-lg">邮寄地址：</view>
									<view class="text-grey text-lg">{{dangqianOrderone?dangqianOrderone.addressDetails:''}}</view>
								</view>
								
								<view class="margin-bottom-lg flex align-center justify-between">
									<view class="text-black text-lg">物流单号：</view>
									<view class="text-gray text-lg">
										<input type="text" v-model="wldh"  placeholder="请输入" class="baojia text-right padding-right-lg" />
								</view>
					
								
							</view>
							<view class="tijiaoa">
								<view class="tja" @click="subfahuo">
									确认发货
								</view>
							</view>
						</view>
					</view>

		
	</view>
	
	
	</view>
</template>

<script>
	import {
		getOrder,
		baojiaquxiao,
		querquxiao,
		getzhandian,
		addQuren,
		fukuanquxiao,
		fahuoquxiao,
		youjiFahuo,
		addStore,
		allfahuo
	} from '../../api/index.js'
	export default {
		data() {
			return {
				ids:'',
				aa:false,
				allRadio:false,
				radio:false,
				wldh:'',
				dangqianOrder:null,
				dangqianOrderone:null,
				jiag:null,
				inde:0,
				ind:0,
				zhandianList: [],
				checked: '0',
				modalName: '',
				modalNameone:'',
				orderList: [],
				TabCur: 0,
				scrollLeft: 0,
				page: 1,
				total:0,
				list: [
					'待报价',
					'待确认',
					'待付款',
					'待发货',
					'已驳回',
					'取消审核',
					'已取消',
					'已完成',
				]
				
			}
		},
		
		 onLoad(optioins) {
			this.TabCur = optioins.orderType
			this.scrollLeft = (optioins.orderType - 1) * 60
			this.getList()
			this.getZd()
		},
		// 下拉刷新
		onPullDownRefresh(){
			this.orderList = []
			this.page = 1
			this.getList()
		},

		// 下拉加载
		onReachBottom () {
			uni.showLoading({
				title:'加载中...'
			})
			if(this.page * 5 > this.total){
				uni.showToast({
					title:'没有数据啦',
					icon:'none'
				})
				return
			}
			this.page++
			this.getList()
		},
		methods: {
			//单个点击
			clickradio(index){
				this.orderList[index].checked = !this.orderList[index].checked
				const res = this.orderList.every(item => item.checked === true)
				res?this.allRadio=true : this.allRadio = false
			},
			// 点击全选按钮
			selectAllRadio(){
				this.allRadio = !this.allRadio
				this.orderList.forEach(item =>{
					item.checked = this.allRadio
				})
			},
			//点击多选批量操作
			addAllOrder(){
				this.aa = true
				let arr = this.orderList.filter(item => item.checked === true)
				console.log(arr)
				if(arr.length==0){
					uni.showToast({
						title:'至少选择一项',
						icon:'none'
					})
					
				}else{
					const str = arr[0].websiteName
					for(let i = 0;i<arr.length;i++){
						if(arr[i].staffName == uni.getStorageSync('user').staffName && arr[i].websiteName == str){
							this.ids = this.ids + arr[i].id + ','
						
						}else{
							uni.showToast({
								title:'请选择相同回收点或只能选择自己订单',
								icon:'none'
							})
							return
						}
					}
					
					this.showModalone('bottomModalone',arr[0])
				}
			},
			// 点击去详情
			quxiangqin(orderId){
				console.log(orderId)
				uni.navigateTo({
					url:'/pages/xiangqing/xiangqing?orderId='+orderId
				})
			},
			//点击确认发货
			subfahuo(){
				if(this.wldh===''){
					uni.showToast({
						title:'请填写物流单号',
						icon:'none'
					})
					return
				}
				if(this.aa){
					allfahuo({
						ids:this.ids,
						staffId:this.dangqianOrderone.staffId,
						trackingNumber:this.wldh
					}).then(()=>{
						console.log('批量发货成功')
						uni.showToast({
							title:'发货成功',
							icon:'none'
						})
						this.aa = false
						this.gaunbione()
						this.page = 1
						this.orderList = []
						this.getList()
					})
				}else{
					youjiFahuo({
						orderId:this.dangqianOrderone.id,
						staffId:this.dangqianOrderone.staffId,
						trackingNumber:this.wldh
					}).then(res=>{
						console.log(res)
						uni.showToast({
							title:'发货成功',
							icon:'none'
						})
						this.gaunbione()
						this.page = 1
						this.orderList = []
						this.getList()
					})
				}
				
			},
			//提交确认信息
			subdingdan(){
				if(this.checked){
					if(this.jiag == null){
						uni.showToast({
							title:'填写完整或正确信息',
							icon:'none'
						})
						return
					}
					
					addQuren({
						orderId:this.dangqianOrder.id,
						recoveryMethod:Number(this.checked),
						staffId:this.dangqianOrder.staffId,
						staffPrice:this.jiag,
						websiteId:this.zhandianList[this.inde].childWebsiteList[this.ind].id
					}).then(res=>{
						console.log(res)
						uni.showToast({
							title:'提交成功',
							icon:'none'
						})
						this.gaunbi()
						this.page = 1
						this.orderList = []
						this.getList()
					})
				}
				
			},
			//选择地区
			bindPicker(e){
				this.inde = Number(e.detail.value)
			},
			bindPickerone(e){
				this.ind= Number(e.detail.value)
			},
			//获取站点信息
			async getZd() {
				const res = await getzhandian()
				console.log(res)
				this.zhandianList = res.records
			},
			//单选
			ckickRadio(index) {
				console.log(index)
				this.checked = index
			},
			// 点击出现待确定弹出层
			showModal(e,order) {
				this.modalName = e
				this.dangqianOrder = order
			},
			// 点击出现待发货弹出层
			showModalone(e,order){
				this.modalNameone = e
				this.dangqianOrderone = order
			},
			//点击关闭待确定弹出层
			gaunbi() {
				this.modalName = null
			},
			//点击关闭待发货弹出层
			gaunbione() {
				this.modalNameone = null
			},
			// 点击取消按钮
			clickquxiao(id, staffId) {
				uni.showModal({
					title:'提示',
					content:'确认取消吗',
					success:({confirm}) =>{
						if(confirm){
							if(this.TabCur === '0' || this.TabCur === 0){
								baojiaquxiao({
									orderId: id,
									staffId: staffId
								}).then(() => {
									uni.showToast({
										title: '取消成功',
										icon: 'none'
									})
									
								})
							}
							if(this.TabCur === "2" || this.TabCur === 1){
								fukuanquxiao({
									orderId: id,
									staffId: staffId
								}).then(() => {
									uni.showToast({
										title: '取消成功',
										icon: 'none'
									})
								})
							}
							if(this.TabCur === "3" || this.TabCur === 3){
								fahuoquxiao({
									orderId: id,
									staffId: staffId
								}).then(() => {
									uni.showToast({
										title: '取消成功',
										icon: 'none'
									})
								})
							}
							this.orderList = []
							this.getList()
						}
					}
				})
			},
			// 点击拒绝按钮
			jujue(id, staffId) {
				uni.showModal({
					title:'提示',
					content:'确认拒绝吗',
					success:({confirm})=>{
						if(confirm){
							querquxiao({
								orderId: id,
								staffId: staffId
							}).then(() => {
								uni.showToast({
									title: '拒绝成功',
									icon: 'none'
								})
								this.orderList = []
								this.getList()
							})
						}
					}
				})
			},
			// 点击复制订单号
			cliclCoby(data) {
				uni.setClipboardData({
					data
				});
			},
			// 点击导航栏切换
			tabSelect(index) {
				this.orderList = []
				this.page=1
				this.TabCur = index
				this.scrollLeft = (index - 1) * 60
				this.getList()
			},
			// 获得订单
			async getList() {
				const res = await getOrder({
					limit: 5,
					orderType: this.TabCur,
					page: this.page,
					staffId: uni.getStorageSync('user').id
				})
				console.log(res)
				this.total = res.total
				res.records.forEach( item =>{
					item.checked = false
				})
				this.orderList = this.orderList.concat(res.records)
				uni.hideLoading()
				uni.stopPullDownRefresh()
			}
		}
	}
</script>

<style>
	.order {
		padding: 32rpx;
		padding-top: 130rpx;
		padding-bottom: 240rpx;
		overflow: hidden;
		
		background-color: #f6f6f6;
	}

	.scroll {
		width: 686rpx;
		position: fixed;
		top: 0rpx;
		left: 32rpx;
		background-color: #f6f6f6;
		z-index: 999;
	}


	.nav .cu-item.cur {
		border-bottom: none;

	}


	.nav .cu-item {
		position: relative;

	}

	.nav .cu-item.cur::after {
		content: '';
		display: block;
		background-color: #4470F4;
		width: 32rpx;
		height: 4rpx;
		position: absolute;
		bottom: 10rpx;
		left: 50%;
		transform: translateX(-50%);
	}


	/* 订单列表 */
	.order-item {
		width: 686rpx;
		border-radius: 24rpx;
		background-color: #fff;
		padding: 32rpx;
		margin-bottom: 30rpx;
		z-index: 111;
	}

	.item-title {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 12rpx;
	}

	.title-left {
		color: #999;
		font-size: 32rpx;
		display: flex;
		align-items: center;
	}

	.title-left>radio {
		transform: scale(.7);
		margin-right: 10rpx;
	}

	.title-type {
		font-size: 32rpx;
		color: #4470F4;
	}

	.item-conent {
		width: 100%;
		margin: 30rpx 0;
		padding: 24rpx;
		border-radius: 16rpx;
		background-color: #f6f6f6;
	}

	.conent-cn {
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 28rpx;
		margin: 32rpx 0;
	}

	.cn-left {
		color: #333;
	}

	.cn-right {
		color: #999;
	}

	.item-bom {
		width: 100%;
		height: 72rpx;
		display: flex;
		justify-content: flex-end;
	}

	.item-bom>view {
		width: 144rpx;
		height: 72rpx;
		line-height: 72rpx;
		text-align: center;
		border-radius: 56rpx;
		border: 1px solid #eee;
		font-size: 32rpx;
	}

	/* 底部 */
	.tijiao {
		width: 100%;
		height: 120rpx;
		background-color: #fff;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 32rpx;
	}

	.tj {
		color: #ccc;
		font-size: 32rpx;
	}

	.radio>radio {
		transform: scale(.7);
	}

	.sub {
		display: flex;
		align-items: center;
	}

	.ben {
		width: 100%;
		height: 68rpx;
		background-color: #FFF;
	}

	.tabbar {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
	}

	.jujue>view,
	.queding>view {
		width: 144rpx;
		height: 72rpx;
		line-height: 72rpx;
		text-align: center;
		border-radius: 56rpx;
		border: 1px solid #FF4000;
		font-size: 32rpx;
		color: #FF4000;
		margin-right: 24rpx;
	}

	.queding>view {
		border: none;
		background-color: #4470F4;
		color: #fff;
		margin-right: 0;
	}

	/* 价格 */
	.jiage {
		width: 100%;
		height: 60rpx;
		display: flex;
		align-items: baseline;
		justify-content: flex-end;
		margin: 32rpx 0;
	}

	.jiage>text:nth-of-type(1) {
		font-size: 32rpx;
		color: #333;
		font-weight: 700;
	}

	.jiage>text:nth-of-type(2),
	.jiage>text:nth-of-type(4) {
		font-size: 28rpx;
		color: #FF4000;
		font-weight: 700;
	}

	.jiage>text:nth-of-type(3) {
		font-size: 48rpx;
		color: #FF4000;
		font-weight: 700;
	}

	.subright {
		justify-content: flex-end;

	}

	.radio>radio {
		transform: scale(.7);
	}

	.radio text {
		font-size: 32rpx;
		color: #999;
	}



	.tijiaoa {
		width: 100%;
		height: 88rpx;
		background-color: #fff;
	}

	.tja {
		width: 686rpx;
		height: 100%;
		background-color: #4470F4;
		border-radius: 56rpx;
		text-align: center;
		/* margin: 0 auto; */
		font-size: 32rpx;
		color: #fff;
		font-weight: 700;
		text-align: center;
		line-height: 88rpx;
	}

	.huishoudain{
		
		height: 88rpx;
		width: 416rpx;
		border-radius: 16rpx;
		background-color: #f6f6f6;
		color: #999999;
		font-size: 32rpx;
		line-height: 88rpx;
	}
</style>
